<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">-->

    <link rel="stylesheet" href="../css/indexStyle.css">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <meta charset="UTF-8">
    <title>主页</title>
</head>
<style>

</style>
<body>
<div>
    <!--    导航栏-->
    <div th:replace="~{header :: header}"></div>
    <!-- 轮播图 -->
    <div id="myCarousel" class="carousel slide" style="width: 1200px; height: 500px; margin: 20px auto">
        <div class="carousel-inner" style="width: 1200px; height: 500px;">
            <div class="item active" style="width: 1200px; height: 500px;">
                <img style="width: 100%; height: 100%" src="../images/carousel/carousel1.jpg" alt="First slide">
<!--                <div class="carousel-caption"> 1</div>-->
            </div>
            <div class="item" style="width: 1200px; height: 500px;">
                <img style="width: 100%; height: 100%" src="../images/carousel/carousel2.jpg" alt="First slide">
<!--                <div class="carousel-caption"> 2</div>-->
            </div>
            <div class="item" style="width: 1200px; height: 500px;">
                <img style="width: 100%; height: 100%" src="../images/carousel/carousel3.jpg" alt="First slide">
<!--                <div class="carousel-caption"> 3</div>-->
            </div>
            <div class="item" style="width: 1200px; height: 500px;">
                <img style="width: 100%; height: 100%" src="../images/carousel/carousel4.jpg" alt="First slide">
<!--                <div class="carousel-caption"> 4</div>-->
            </div>
            <div class="item" style="width: 1200px; height: 500px;">
                <img style="width: 100%; height: 100%" src="../images/carousel/carousel5.jpg" alt="First slide">
<!--                <div class="carousel-caption"> 5</div>-->
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<!--            <span class="sr-only">Previous</span>-->
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<!--            <span class="sr-only">Next</span>-->
        </a>
    </div>
    <!--产品-->
    <div>
        <div class="productBox">
            <div class="productNo1">
                <div class="titleBox">
                    <div style="width: 40px; height: 40px; margin-top: 0px; margin-left: -7px;">
                        <img width="100%" height="100%" src="../images/food.png">
                    </div>
                    <h2>食品健康</h2>
                </div>
                <div class="productsBox">
                    <div class="productNo1LeftProduct">
                        <a href="productDetail.html">
                            <img width="100%" height="100%" class="leftProduct" src="../images/food/food.jpg">
                        </a>
                    </div>
                    <div class="rightProductsBox">
                        <div class="rightProductBox">
                            <a href="#">
                                <div class="productStyle">
                                    <img  width="100%" height="100%" class="productImage" src="../images/food/food1.jpg" alt="">
                                    <div class="productDetails">
                                        <h3 style="margin: 0; outline: none">FE 24-70mm F2.8 GM</h3>
                                        <p style="margin-bottom: 0; text-decoration: none">全画幅标准变焦G大师镜头</p>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="productStyle">
                                    <img  width="100%" height="100%" class="productImage" src="../images/food/food2.jpg" alt="">
                                    <div class="productDetails">
                                        <h3 style="margin: 0; outline: none">Vlog微单™相机 ZV-E10L</h3>
                                        <p style="margin-bottom: 0; text-decoration: none">搭配E PZ 16-50mm F3.5-5.6 OSS</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="rightProductBox">
                            <a href="#">
                                <div class="productStyle">
                                    <img  width="100%" height="100%" class="productImage" src="../images/food/food3.jpg" alt="">
                                    <div class="productDetails">
                                        <h3 style="margin: 0;">FX6 全画幅电影摄影机</h3>
                                        <p style="margin-bottom: 0;">Netflix（奈飞）认证摄影机</p>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="productStyle">
                                    <img  width="100%" height="100%" class="productImage" src="../images/food/food4.jpg" alt="">
                                    <div class="productDetails">
                                        <h3 style="margin: 0;">DSC-RX100M7 旗舰黑卡</h3>
                                        <p style="margin-bottom: 0;">24-200mm / 4K HDR / 视频竖拍</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--产品2-->
        <div>
            <div class="productBox">
                <div class="productNo1">
                    <div class="titleBox">
                        <div style="width: 40px; height: 40px; margin-top: 0px; margin-left: -7px;">
                            <img width="100%" height="100%" src="../images/life.png">
                        </div>
                        <h2>生活用品</h2>
                    </div>
                    <div class="productsBox">

                        <div class="rightProductsBox">
                            <div class="rightProductBox">
                                <a href="#">
                                    <div class="productStyle">
                                        <img  width="100%" height="100%" class="productImage" src="../images/life/life1.jpg" alt="">
                                        <div class="productDetails">
                                            <h3 style="margin: 0; outline: none">FE 24-70mm F2.8 GM</h3>
                                            <p style="margin-bottom: 0; text-decoration: none">全画幅标准变焦G大师镜头</p>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="productStyle">
                                        <img  width="100%" height="100%" class="productImage" src="../images/life/life2.jpg" alt="">
                                        <div class="productDetails">
                                            <h3 style="margin: 0; outline: none">Vlog微单™相机 ZV-E10L</h3>
                                            <p style="margin-bottom: 0; text-decoration: none">搭配E PZ 16-50mm F3.5-5.6 OSS</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="rightProductBox">
                                <a href="#">
                                    <div class="productStyle">
                                        <img  width="100%" height="100%" class="productImage" src="../images/life/life3.jpg" alt="">
                                        <div class="productDetails">
                                            <h3 style="margin: 0;">FX6 全画幅电影摄影机</h3>
                                            <p style="margin-bottom: 0;">Netflix（奈飞）认证摄影机</p>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="productStyle">
                                        <img  width="100%" height="100%" class="productImage" src="../images/life/life4.jpg" alt="">
                                        <div class="productDetails">
                                            <h3 style="margin: 0;">DSC-RX100M7 旗舰黑卡</h3>
                                            <p style="margin-bottom: 0;">24-200mm / 4K HDR / 视频竖拍</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

                        <div class="productNo1LeftProduct">
                            <a href="#">
                                <img  width="100%" height="100%" class="leftProduct" src="../images/life/life.jpg">
                            </a>
                        </div>

                    </div>

                </div>
            </div>
        </div>

    </div>
    <!--页脚-->
    <div class="footerBox">
        <div class="footerCenter">
            <div class="leftFooterCenter">
                <p>产品</p>
                <div class="leftFooterCenterRowBox">
                    <div class="leftFooterCenterRow">
                        <a>购物指南</a>
                        <a>支付方式</a>
                        <a>售后服务</a>
                        <a>特色服务</a>
                        <a>隐私政策</a>
                        <a>责任声明</a>
                    </div>
                </div>
                <div class="leftFooterCenterRowBox">
                    <a>关于我们</a>
                    <a>客户案例</a>
                </div>
                <div class="leftFooterCenterRow1">
                    <a>产品注册</a>
                    <a>会员注册</a>
                </div>
            </div>
            <div class="rightFooterCenter">

                <div class="flexRow">
                    <div class="rightFlexRow">
                        <p style="height: 26px;font-size: 18px;color: white">联系我们</p>
                        <span class="rightFlexRowFont">电话：888-88888888</span><br>
                        <span class="rightFlexRowFont">邮箱：shop@123.com</span><br>
                        <span class="rightFlexRowFont">地址：中国</span>
                        <span class="rightFlexRowFont">联系客服</span>


                    </div>
                </div>
            </div>
        </div>
        <div class="footerBeian">
            <a>京ICP备88888888号</a>
            <a>京公网安备88888888号</a>
        </div>
    </div>
</div>
</body>
<script src="../js/index.js"></script>
</html>
